import React, { useState } from 'react'
import { Tabs, Button, Row, Col, Table, Space, Alert, message, Modal, Form, Input,Checkbox} from 'antd';
import { SearchOutlined, PlusOutlined, MinusOutlined } from '@ant-design/icons';
import List from './list'
import NewForm from './newform'
import Search from './search'
import CheckBox from './checkBox'
import EditableTable from './tabs-02'







export default function TAbs(props) {
    const [isModalVisible, setIsModalVisible] = useState(false);
    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    const columns = [
        { title: 'Name', dataIndex: 'name', key: 'name' },
        { title: 'Age', dataIndex: 'age', key: 'age' },
        { title: 'Address', dataIndex: 'address', key: 'address' },
        {
            title: '操作',
            dataIndex: '',
            key: 'x',
            render: (record) => <>
            {console.log(record)}
                <Button type="查看" onClick={showModal}>查看</Button>
                <Modal title="姓名" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} okText="确定" cancelText="取消">
                    <p>{}</p>
                </Modal>
            </>

        },
    ];


    const data = [
        {
            key: '1',
            name: 'John Brown',
            age: 32,
            address: 'New York No. 1 Lake Park',
        },
        {
            key: '2',
            name: 'Jim Green',
            age: 42,
            address: 'London No. 1 Lake Park',
        },
        {
            key: '3',
            name: 'Joe Black',
            age: 32,
            address: 'Sidney No. 1 Lake Park',
        },
        {
            key: '4',
            name: 'Jim Red',
            age: 32,
            address: 'London No. 2 Lake Park',
        },
    ];



    const [newdata, setData] = useState(data)
    const { TabPane } = Tabs;

    function callback(key) {
        console.log(key);
    }

    function onChange(pagination, filters, sorter, extra) {
        console.log('params', pagination, filters, sorter, extra);
    }
    const add = () => {
        if (newdata && newdata.length >= 5) {
            message.warning("最多添加五条数据");
            return;
        }
        setData([...newdata, { key: newdata.length + 1, name: 'Jim Red', age: 32, address: 'London No. 2 Lakek', }])
    }
    const remove = () => {
        newdata.pop()
        setData([...newdata])
    }
    const onFinish = (values) => {
        console.log('Name:', values.username);
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    return (
        <div>
            <Tabs defaultActiveKey="1" onChange={callback}>
                <TabPane tab="Tab 1" key="1">
                    <Row>
                        <Col span={8} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                            <Button type="primary" icon={<SearchOutlined />} style={{ background: '#fdc50e', border: 'none', margin: '10px' }}>
                                搜索
                            </Button>
                        </Col>
                        <Col span={8} offset={8} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                            <Button type="primary" icon={<SearchOutlined />} style={{ border: 'none', margin: '10px' }}>
                                查看
                            </Button>
                        </Col>
                        <Col span={8} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                            <Button type="primary" icon={<SearchOutlined />} style={{ background: '#fdc50e', border: 'none', margin: '10px' }}>
                                搜索
                            </Button>
                        </Col>
                        <Col span={8} offset={8} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                            <Button type="primary" icon={<SearchOutlined />} style={{ border: 'none', margin: '10px' }}>
                                查看
                            </Button>
                        </Col>
                        <Col span={8} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                            <Button type="primary" icon={<SearchOutlined />} style={{ background: '#fdc50e', border: 'none', margin: '10px' }}>
                                搜索
                            </Button>
                        </Col>
                        <Col span={8} offset={8} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                            <Button type="primary" icon={<SearchOutlined />} style={{ border: 'none', margin: '10px' }}>
                                查看
                            </Button>
                        </Col>
                    </Row>

                </TabPane>
                <TabPane tab="Tab 2" key="2">
                    {newdata.length >= 5 ? <Alert message="最多增加五条数据" type="info"></Alert> : ''}
                    <Space style={{ marginBottom: 16 }}>
                        <Button onClick={() => add()} icon={<PlusOutlined />}>新增</Button>
                        <Button onClick={() => remove()} icon={<MinusOutlined />}>删除</Button>
                    </Space>
                    <Table columns={columns} dataSource={newdata} onChange={onChange} />

                </TabPane>
                <TabPane tab="Tab 3" key="3">
                    <List />
                </TabPane>
                <TabPane tab="Tab 4" key="4">
                    <Form
                        name="basic"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 16 }}
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="Username"
                            name="username"
                            rules={[{ required: true, message: 'Please input your username!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="Password"
                            name="password"
                            rules={[{ required: true, message: 'Please input your password!' }]}
                        >
                            <Input.Password />
                        </Form.Item>

                        <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
                            <Checkbox>Remember me</Checkbox>
                        </Form.Item>

                        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                            <Button type="primary" htmlType="submit">
                                Submit
                            </Button>
                        </Form.Item>
                    </Form>


                </TabPane>
                <TabPane tab="Tab 5" key="5">
                    <NewForm/>
                </TabPane>
                <TabPane tab="Tab 6" key="6">
                    <Search/>
                </TabPane>
                <TabPane tab="Tab 7" key="7">
                    <EditableTable/>
                </TabPane>
                
            </Tabs>

        </div >
    )
}